﻿<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
    
    <style>
        #toTop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    background-image: url('http://geniuscarrier.com/images/up.png');
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#toTop:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
    </style>
    <title>
        Code Guide by @AlloyTeam
    </title>
    
    <style>
        /*
 * Fonts
 */

        @font-face {
            font-family: 'fontello';
            src: url('font/fontello.eot');
            src: url('font/fontello.eot#iefix') format('embedded-opentype'),
                 url('font/fontello.woff') format('woff'),
                 url('font/fontello.ttf') format('truetype'),
                 url('font/fontello.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        [class^="icon-"]:before, [class*=" icon-"]:before {
            font-family: "fontello";
            font-style: normal;
            font-weight: normal;
            speak: none;
            display: inline-block;
            text-decoration: inherit;
            width: 1em;
            margin-right: .2em;
            text-align: center;
            font-variant: normal;
            text-transform: none;
        }

        .icon-github-circled:before { content: '\e800'; } /* 'î €' */
        .icon-twitter:before { content: '\e801'; } /* 'î ' */


        /*
 * Scaffolding and type
 */

        html {
            font-size: 16px;
        }
        @media (min-width: 48em) {
            html {
                font-size: 20px;
            }
        }

        body {
            margin: 0;
            font: 1rem/1.5 "å¾®è½¯é›…é»‘","PT Sans", sans-serif;
            color: #5a5a5a;
        }

        a {
            color: #08c;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        h1, h2, h3, h4 {
            margin: 0 0 .5rem;
            font-weight: normal;
            line-height: 1;
            color: #2a2a2a;
            letter-spacing: -.05em;
        }
        h1 { font-size: 3rem; }
        h2 { font-size: 2.5rem; }
        h3 { font-size: 1.75rem; }
        h4 { font-size: 1.25rem }

        p {
            margin: 0 0 1rem;
        }
        .lead {
            font-size: 1.3rem;
        }

        blockquote {
            position: relative;
            margin: 0 1rem 1rem;
            font-style: italic;
            color: #7a7a7a;
        }
        blockquote p {
            margin-bottom: 0;
        }

        ul li {
            margin-bottom: .25rem;
        }

        /* Tighten up margin on last items */
        p:last-child,
        ul:last-child,
        blockquote:last-child{
            margin-bottom: 0;
        }



        /*
 * Code
 */

        code,
        pre {
            font-family: "PT Mono", Menlo, "Courier New", monospace;
            font-size: 95%;
        }
        code {
            padding: 2px 4px;
            font-size: 85%;
            color: #d44950;
            background-color: #f7f7f9;
            border-radius: .2rem;
        }

        pre {
            display: block;
            margin: 0 0 1rem;
            line-height: 1.4;
            white-space: pre;
            white-space: pre-wrap;
        }
        pre code {
            padding: 0;
            color: inherit;
            background-color: transparent;
            border: 0;
        }
        .highlight {
            margin: 0;
        }
        .highlight pre {
            margin-bottom: 0;
        }
        .highlight + .highlight {
            margin-top: 1rem;
        }


        /*
 * The Grid
 */

        .col {
            padding: 2rem 1rem;
        }
        .col p {
            max-width: 40rem;
        }
        .col + .col {
            border-top: 1px solid #dfe1e8;
            background-color: #f7f7f9;
        }
        @media (min-width: 38em) {
            .col {
                padding: 2rem;
            }
        }
        @media (min-width: 48em) {
            .section {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            .col {
                display: table-cell;
                padding: 3rem;
                vertical-align: top;
            }
            .col + .col {
                border-top: 0;
            }
        }

        /* Make the ToC a whole section */
        .toc .col + .col {
            background-color: #fff;
        }


        /*
 * Masthead
 */

        .masthead {
            padding: 3rem 1rem;
            color: rgba(255,255,255,.5);
            text-align: center;
            background-color: #2a3440;
        }
        .masthead h1 {
            color: #fff;
            margin-bottom: .25rem;
        }
        .masthead .icon {
            display: inline-block;
            font-size: 3rem;
            margin: 0 .5rem;
        }
        .masthead-links {
            font-size: 2rem;
        }
        .masthead-links a {
            color: rgba(255,255,255,.5);
            text-decoration: none;
            transition: all .15s linear;
        }
        .masthead-links a:hover {
            color: #fff;
        }

        @media (min-width: 38em) {
            .masthead {
                padding-top: 4rem;
                padding-bottom: 4rem;
            }
        }


        /*
 * Sections
 */

        .heading {
            padding: 2rem 1rem 1.5rem;
            background-color: #dfe1e8;
        }

        @media (min-width: 38em) {
            .heading {
                padding: 3rem 3rem 2.5rem;
            }
        }

        .section {
            border-bottom: 1px solid #dfe1e8;
        }


        /*
 * Footer
 */

        .footer {
            padding: 3rem 1rem;
            font-size: 90%;
            text-align: center;
        }
        .footer p {
            margin-bottom: .5rem;
        }

        .quick-links {
            list-style: none;
            margin-left: 0;
        }
        .quick-links li {
            display: inline;
        }


        /*
 * Syntax highlighting
 */

        .hll { background-color: #ffffcc }
        /*{ background: #f0f3f3; }*/
        .c { color: #999; } /* Comment */
        .err { color: #AA0000; background-color: #FFAAAA } /* Error */
        .k { color: #006699; } /* Keyword */
        .o { color: #555555 } /* Operator */
        .cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
        .cp { color: #009999 } /* Comment.Preproc */
        .c1 { color: #999; } /* Comment.Single */
        .cs { color: #999; } /* Comment.Special */
        .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
        .ge { font-style: italic } /* Generic.Emph */
        .gr { color: #FF0000 } /* Generic.Error */
        .gh { color: #003300; } /* Generic.Heading */
        .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
        .go { color: #AAAAAA } /* Generic.Output */
        .gp { color: #000099; } /* Generic.Prompt */
        .gs { } /* Generic.Strong */
        .gu { color: #003300; } /* Generic.Subheading */
        .gt { color: #99CC66 } /* Generic.Traceback */
        .kc { color: #006699; } /* Keyword.Constant */
        .kd { color: #006699; } /* Keyword.Declaration */
        .kn { color: #006699; } /* Keyword.Namespace */
        .kp { color: #006699 } /* Keyword.Pseudo */
        .kr { color: #006699; } /* Keyword.Reserved */
        .kt { color: #007788; } /* Keyword.Type */
        .m { color: #FF6600 } /* Literal.Number */
        .s { color: #d44950 } /* Literal.String */
        .na { color: #4f9fcf } /* Name.Attribute */
        .nb { color: #336666 } /* Name.Builtin */
        .nc { color: #00AA88; } /* Name.Class */
        .no { color: #336600 } /* Name.Constant */
        .nd { color: #9999FF } /* Name.Decorator */
        .ni { color: #999999; } /* Name.Entity */
        .ne { color: #CC0000; } /* Name.Exception */
        .nf { color: #CC00FF } /* Name.Function */
        .nl { color: #9999FF } /* Name.Label */
        .nn { color: #00CCFF; } /* Name.Namespace */
        .nt { color: #2f6f9f; } /* Name.Tag */
        .nv { color: #003333 } /* Name.Variable */
        .ow { color: #000000; } /* Operator.Word */
        .w { color: #bbbbbb } /* Text.Whitespace */
        .mf { color: #FF6600 } /* Literal.Number.Float */
        .mh { color: #FF6600 } /* Literal.Number.Hex */
        .mi { color: #FF6600 } /* Literal.Number.Integer */
        .mo { color: #FF6600 } /* Literal.Number.Oct */
        .sb { color: #CC3300 } /* Literal.String.Backtick */
        .sc { color: #CC3300 } /* Literal.String.Char */
        .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
        .s2 { color: #CC3300 } /* Literal.String.Double */
        .se { color: #CC3300; } /* Literal.String.Escape */
        .sh { color: #CC3300 } /* Literal.String.Heredoc */
        .si { color: #AA0000 } /* Literal.String.Interpol */
        .sx { color: #CC3300 } /* Literal.String.Other */
        .sr { color: #33AAAA } /* Literal.String.Regex */
        .s1 { color: #CC3300 } /* Literal.String.Single */
        .ss { color: #FFCC33 } /* Literal.String.Symbol */
        .bp { color: #336666 } /* Name.Builtin.Pseudo */
        .vc { color: #003333 } /* Name.Variable.Class */
        .vg { color: #003333 } /* Name.Variable.Global */
        .vi { color: #003333 } /* Name.Variable.Instance */
        .il { color: #FF6600 } /* Literal.Number.Integer.Long */

        .css .o,
        .css .o + .nt,
        .css .nt + .nt { color: #999; }



    </style>
    
</head>
<body>
    <header class="masthead">
        <div class="container">
            <span class="icon">✍</span>
            <h1>Code Guide by @AlloyTeam</h1>
            <p class="lead">Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript</p>
            <p class="lead">通过分析github代码库总结出来的工程师代码书写习惯：<a target="_blank" href="http://sideeffect.kr/popularconvention#javascript">GO!!!</a></p>
        </div>
    </header>

    <a id="toTop" href="#top"></a>
    <div id="toc" class="heading">
        <h2>Table of contents</h2>
    </div>
    <div class="section toc">
        <div class="col">
            <h4><a href="#html">命名规则</a></h4>
            <ul>
                <li><a href="#project-naming">项目名</a></li>
                <li><a href="#folder-naming">目录名</a></li>
                <li><a href="#js-naming">JS文件命名</a></li>
                <li><a href="#css-naming">CSS&amp;SCSS文件命名</a></li>
                <li><a href="#html-naming">HTML文件命名</a></li>
            </ul>
        </div>
        <div class="col">
            <h4><a href="#html">HTML</a></h4>
            <ul>
                <li><a href="#html-syntax">语法</a></li>
                <li><a href="#html-doctype">HTML5 doctype</a></li>
                <li><a href="#html-lang">语言属性</a></li>
                <li><a href="#html-encoding">字符编码</a></li>
                <li><a href="#html-ie-compatibility-mode">IE 兼容模式</a></li>
                <li><a href="#html-style-script">引入 CSS 和 JavaScript</a></li>
                <li><a href="#html-practicality">实用高于完美</a></li>
                <li><a href="#html-attribute-order">属性顺序</a></li>
                <li><a href="#html-boolean-attributes">Boolean 属性</a></li>
                <li><a href="#html-reducing-markup">减少标签数量</a></li>
                <li><a href="#html-javascript">JavaScript 生成标签</a></li>
            </ul>
        </div>
        <div class="col">
            <h4><a href="#css">CSS</a></h4>
            <ul>
                <li><a href="#css-syntax">CSS 语法</a></li>
                <li><a href="#css-declaration-order">声明顺序</a></li>
                <li><a href="#css-import">不要使用 @import</a></li>
                <li><a href="#css-media-queries">Media query 的位置</a></li>
                <li><a href="#css-prefixed-properties">前缀属性</a></li>
                <li><a href="#css-single-declarations">单行声明的规则</a></li>
                <li><a href="#css-shorthand">属性简写</a></li>
                <li><a href="#css-nesting">LESS 和 SASS 中的嵌套</a></li>
                <li><a href="#css-comments">代码注释</a></li>
                <li><a href="#css-classes">Class 命名</a></li>
                <li><a href="#css-selectors">选择器</a></li>
                <li><a href="#css-organization">代码组织</a></li>
            </ul>
        </div>
        <div class="col">
            <h4><a href="#javascript">JavaScript</a></h4>
            <ul>
                <li><a href="#js-indentation">缩进,分号,单行长度</a></li>
                <li><a href="#js-blank-lines">空行</a></li>
                <li><a href="#js-variable-naming">变量命名</a></li>
                <li><a href="#js-literal-value-string">字符常量</a></li>
                <li><a href="#js-literal-value-null">null使用场景</a></li>
                <li><a href="#js-literal-value-undefined">undefined使用场景</a></li>
                <li><a href="#js-literal-value-object">Object 的声明</a></li>
                <li><a href="#js-literal-value-array">Array 的声明</a></li>
                <li><a href="#js-comments-single-line">单行注释</a></li>
                <li><a href="#js-comments-multiline">多行注释</a></li>
                <li><a href="#js-comments-documentation">文档注释</a></li>
                <li><a href="#js-brace">括号对齐</a></li>
                <li><a href="#js-if-else">if else</a></li>
                <li><a href="#js-switch">switch</a></li>
                <li><a href="#js-for">for</a></li>
                <li><a href="#js-variable-declaration">变量声明</a></li>
                <li><a href="#js-function-declaration">函数声明</a></li>
                <li><a href="#js-miscellaneous">杂项</a></li>
            </ul>
        </div>
    </div>

    <div id="golden-rule" class="section">
        <div class="col">
            <h2>最佳原则</h2>
            <p>坚持这些原则。无论多少，找出不对的地方。如果你想要为这个编码指导做贡献，请访问<a href="https://github.com/materliu/code-guide/issues/new">新开一个issue</a>.</p>
        </div>
        <div class="col">
            <blockquote>
                <p>无论人数多少，代码都应该同出一门。</p>
            </blockquote>
        </div>
    </div>
    <div id="project-naming" class="section">
        <div class="col">
            <h3>项目命名</h3>
            <p>项目名全部采用小写方式， 以中划线分隔。 比如： my-project-name</p>
        </div>
    </div>
    <div id="folder-naming" class="section">
        <div class="col">
            <h3>目录名</h3>
            <p>目录名参照上一条规则,有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models</p>
        </div>
    </div>
    <div id="js-naming" class="section">
        <div class="col">
            <h3>JavaScript文件命名</h3>
            <p>所有js文件名，多个单词组成时，采用中划线连接方式，比如说： 账号模型文件 account-model.js</p>
        </div>
    </div>
    <div id="css-naming" class="section">
        <div class="col">
            <h3>CSS，SCSS文件命名</h3>
            <p>多个单词组成时，采用中划线连接方式，比如说：retina-sprites.scss</p>
        </div>
    </div>
    <div id="html-naming" class="section">
        <div class="col">
            <h3>HTML文件命名</h3>
            <p>多个单词组成时，采用中划线连接方式，比如说: error-report.html</p>
        </div>
    </div>

    <div id="html" class="heading">
        <h2>HTML</h2>
    </div>
    <div id="html-syntax" class="section">
        <div class="col">
            <h3>语法</h3>
            <ul>
                <li>使用四个空格的 soft tabs &mdash; 这是保证代码在各种环境下显示一致的唯一方式。</li>
                <li>嵌套的节点应该缩进（四个空格）。</li>
                <li>在属性上，使用双引号，不要使用单引号。</li>
                <li>不要在自动闭合标签结尾处使用斜线 - <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 规范</a> 指出他们是可选的。</li>
                <li>不要忽略可选的关闭标签（例如，<code>&lt;/li&gt;</code> 和 <code>&lt;/body&gt;</code>）。</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
                <span class="nt">&lt;head&gt;</span>
                <span class="nt">&lt;title&gt;</span>Page title<span class="nt">&lt;/title&gt;</span>
                <span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
                <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"images/company-logo.png"</span> <span class="na">alt=</span><span class="s">"Company"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"hello-world"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-doctype" class="section">
        <div class="col">
            <h3>HTML5 doctype</h3>
            <p>在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。</p>
            <p>虽然doctype不区分大小写，但是按照惯例，doctype大写 <a target="_blank" href="http://stackoverflow.com/questions/15594877/is-there-any-benefits-to-use-uppercase-or-lowercase-letters-with-html5-tagname">关于html属性，大写还是小写的一片文章</a></p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
                <span class="nt">&lt;head&gt;</span>
                <span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-lang" class="section">
        <div class="col">
            <h3>语言属性</h3>
            <p>针对HTML5 :</p>
            <blockquote>
                <p>作者应在html的跟元素上加上这个文件的语言。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。</p>
            </blockquote>
            <p>阅读更多有关 <code>lang</code> 属性 <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">在这个文章中</a>.</p>
            <p>通过Sitepoint 得到一个<a href="http://reference.sitepoint.com/html/lang-codes">语言代码列表</a>.</p>
            <p>Sitepoint只是给出了语言代码的大类，比如说中文就只给出了ZH，但是没有区分香港，台湾，大陆等。而微软给出的一份细分了zh-cn,zh-hk,zh-tw, Head to Microsoft for a <a href="http://msdn.microsoft.com/en-us/library/ms533052(v=vs.85).aspx">detail list of language codes</a>.</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en-us"</span><span class="nt">&gt;</span>
                <span class="c">&lt;!-- ... --&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-ie-compatibility-mode" class="section">
        <div class="col">
            <h3>IE 兼容模式</h3>
            <p>Internet Explorer 支持使用一个文档属性标签 <code>&lt;meta&gt;</code> 来指出这个页面应当支持的IE的版本。除非另有规定，最好用最新的支持的模式。</p>
            <p>更多信息, <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">阅读这个 Stack Overflow 文章</a>.</p>
            <p>不同doctype在不同浏览器下的不同渲染模式，诡异模式<a href="https://hsivonen.fi/doctype/">总结的很到位</a>.</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=Edge"</span><span class="nt">&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-encoding" class="section">
        <div class="col">
            <h3>字符编码</h3>
            <p>通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="nt">&lt;head&gt;</span>
                <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-style-script" class="section">
        <div class="col">
            <h3>引入 CSS 和 JavaScript</h3>
            <p>根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 <code>type</code>，因为 <code>text/css</code> 和 <code>text/javascript</code> 分别是他们的默认值。</p>
            <h4>HTML5 规范链接</h4>
            <ul>
                <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">使用 link</a></li>
                <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">使用 style</a></li>
                <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">使用 script</a></li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="c">&lt;!-- External CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"code-guide.css"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- In-document CSS --&gt;</span>
<span class="nt">&lt;style&gt;</span>
                <span class="c">/* ... */</span>
<span class="nt">&lt;/style&gt;</span>
<span class="c">&lt;!-- JavaScript --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"code-guide.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-practicality" class="section">
        <div class="col">
            <h3>实用高于完美</h3>
            <p>尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。</p>
        </div>
    </div>
    <div id="html-attribute-order" class="section">
        <div class="col">
            <h3>属性顺序</h3>
            <p>HTML 属性应该按照特定的顺序出现以保证易读性。</p>
            <ul>
                <li><code>id</code></li>
                <li><code>class</code></li>
                <li><code>name</code></li>
                <li><code>data-*</code></li>
                <li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code></li>
                <li><code>title</code>, <code>alt</code></li>
                <li><code>aria-*</code>, <code>role</code></li>
            </ul>
            <p>Classes 是为高可复用组件设计的，理论上他们应处在第一位。Ids 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。但为了突出id的重要性， 把id放到了第一位。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="nt">&lt;a</span> <span class="na">id=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"..."</span> <span class="na">data-modal=</span><span class="s">"toggle"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    Example link
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-boolean-attributes" class="section">
        <div class="col">
            <h3>Boolean 属性</h3>
            <p>Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。</p>
            <p>了解更多内容，参考 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">WhatWG section on boolean attributes</a>:</p>
            <blockquote>
                <p>一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。</p>
            </blockquote>
            <p>如果你<em>必须</em>为属性添加<strong>并不需要的</strong>取值，参照 WhatWG 的指引:</p>
            <blockquote>
                <p>如果属性存在，他的取值必须是空字符串或者 [...] 属性的规范名称，不要在首尾包含空白字符。</p>
            </blockquote>
            <p><strong>简而言之，不要为 Boolean 属性添加取值。</strong></p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;select&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">selected</span><span class="nt">&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-reducing-markup" class="section">
        <div class="col">
            <h3>减少标签数量</h3>
            <p>在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="c">&lt;!-- Not so great --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="c">&lt;!-- Better --&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="html-javascript" class="section">
        <div class="col">
            <h3>JavaScript 生成标签</h3>
            <p>在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。</p>
        </div>
    </div>

    <div id="css" class="heading">
        <h2>CSS</h2>
    </div>
    <div id="css-syntax" class="section">
        <div class="col">
            <h3>语法</h3>
            <ul>
                <li>使用四个空格的 soft tabs &mdash; 这是保证代码在各种环境下显示一致的唯一方式。</li>
                <li>使用组合选择器时，保持每个独立的选择器占用一行。</li>
                <li>为了代码的易读性，在每个声明的左括号前增加一个空格。</li>
                <li>声明块的右括号应该另起一行。</li>
                <li>每条声明 <code>:</code> 后应该插入一个空格。</li>
                <li>每条声明应该只占用一行来保证错误报告更加准确。</li>
                <li>所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。</li>
                <li>逗号分隔的取值，都应该在逗号之后增加一个空格。比如说box-shadow</li>
                <li>不要在颜色值 <code>rgb()</code> <code>rgba()</code> <code>hsl()</code> <code>hsla()</code>和 <code>rect()</code> <em>中</em>增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space).</li>
                <li>所有的十六进制值都应该使用小写字母，例如 <code>#fff</code>。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。</li>
                <li>尽可能使用短的十六进制数值，例如使用 <code>#fff</code> 替代 <code>#ffffff</code>。</li>
                <li>为选择器中的属性取值添加引号，例如 <code>input[type="text"]</code>。 <a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">他们只在某些情况下可有可无</a>，所以都使用引号可以增加一致性。</li>
                <li>不要为 0 指明单位，比如使用 <code>margin: 0;</code> 而不是 <code>margin: 0px;</code>。</li>
            </ul>
            <p>对这里提到的规则有问题吗？参考 Wikipedia 中的<a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax"> CSS 语法部分</a>。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Bad CSS */</span>
<span class="nc">.selector</span><span class="o">,</span> <span class="nc">.selector-secondary</span><span class="o">,</span> <span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span> <span class="p">{</span>
                <span class="k">padding</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
                <span class="k">margin</span><span class="o">:</span> <span class="m">0px</span> <span class="m">0px</span> <span class="m">15px</span><span class="p">;</span>
                <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
                <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#CCC</span><span class="o">,</span> <span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#FFFFFF</span>
<span class="p">}</span>
<span class="c">/* Good CSS */</span>
<span class="nc">.selector</span><span class="o">,</span>
<span class="nc">.selector-secondary</span><span class="o">,</span>
<span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"text"</span><span class="o">]</span> <span class="p">{</span>
                <span class="k">padding</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
                <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
                <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">5</span><span class="p">);</span>
                <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#ccc</span><span class="o">,</span> <span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-declaration-order" class="section">
        <div class="col">
            <h3>声明顺序</h3>
            <p>相关的属性声明应该以下面的顺序分组处理：</p>
            <ol>
                <li>Positioning</li>
                <li>Box model 盒模型</li>
                <li>Typographic 排版</li>
                <li>Visual 外观</li>
            </ol>
            <p>Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。</p>
            <p>其他属性只在组件 <em>内部</em> 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。</p>
            <p>关于完整的属性以及他们的顺序，请参考 <a href="http://twitter.github.com/recess">Recess</a>。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="nc">.declaration-order</span> <span class="p">{</span>
                <span class="c">/* Positioning */</span>
                <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
                <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
                <span class="k">right</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
                <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
                <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
                <span class="k">z-index</span><span class="o">:</span> <span class="m">100</span><span class="p">;</span>
                <span class="c">/* Box-model */</span>
                <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
                <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>
                <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
                <span class="k">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
                <span class="c">/* Typography */</span>
                <span class="k">font</span><span class="o">:</span> <span class="k">normal</span> <span class="m">13px</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span>
                <span class="k">line-height</span><span class="o">:</span> <span class="m">1</span><span class="o">.</span><span class="m">5</span><span class="p">;</span>
                <span class="k">color</span><span class="o">:</span> <span class="m">#333</span><span class="p">;</span>
                <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>
                <span class="c">/* Visual */</span>
                <span class="k">background-color</span><span class="o">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>
                <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#e5e5e5</span><span class="p">;</span>
                <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
                <span class="c">/* Misc */</span>
                <span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
            </div>
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// 为了方便查阅， 我把Recess的order贴了一份过来, 引入时间2014-05-05</span>
<span class="c1">// css property order</span>
<span class="kd">var</span> <span class="nx">order</span> <span class="o">=</span> <span class="p">[</span>
                <span class="s1">'position'</span>
                <span class="p">,</span> <span class="s1">'top'</span>
                <span class="p">,</span> <span class="s1">'right'</span>
                <span class="p">,</span> <span class="s1">'bottom'</span>
                <span class="p">,</span> <span class="s1">'left'</span>
                <span class="p">,</span> <span class="s1">'z-index'</span>
                <span class="p">,</span> <span class="s1">'display'</span>
                <span class="p">,</span> <span class="s1">'float'</span>
                <span class="p">,</span> <span class="s1">'width'</span>
                <span class="p">,</span> <span class="s1">'height'</span>
                <span class="p">,</span> <span class="s1">'max-width'</span>
                <span class="p">,</span> <span class="s1">'max-height'</span>
                <span class="p">,</span> <span class="s1">'min-width'</span>
                <span class="p">,</span> <span class="s1">'min-height'</span>
                <span class="p">,</span> <span class="s1">'padding'</span>
                <span class="p">,</span> <span class="s1">'padding-top'</span>
                <span class="p">,</span> <span class="s1">'padding-right'</span>
                <span class="p">,</span> <span class="s1">'padding-bottom'</span>
                <span class="p">,</span> <span class="s1">'padding-left'</span>
                <span class="p">,</span> <span class="s1">'margin'</span>
                <span class="p">,</span> <span class="s1">'margin-top'</span>
                <span class="p">,</span> <span class="s1">'margin-right'</span>
                <span class="p">,</span> <span class="s1">'margin-bottom'</span>
                <span class="p">,</span> <span class="s1">'margin-left'</span>
                <span class="p">,</span> <span class="s1">'margin-collapse'</span>
                <span class="p">,</span> <span class="s1">'margin-top-collapse'</span>
                <span class="p">,</span> <span class="s1">'margin-right-collapse'</span>
                <span class="p">,</span> <span class="s1">'margin-bottom-collapse'</span>
                <span class="p">,</span> <span class="s1">'margin-left-collapse'</span>
                <span class="p">,</span> <span class="s1">'overflow'</span>
                <span class="p">,</span> <span class="s1">'overflow-x'</span>
                <span class="p">,</span> <span class="s1">'overflow-y'</span>
                <span class="p">,</span> <span class="s1">'clip'</span>
                <span class="p">,</span> <span class="s1">'clear'</span>
                <span class="p">,</span> <span class="s1">'font'</span>
                <span class="p">,</span> <span class="s1">'font-family'</span>
                <span class="p">,</span> <span class="s1">'font-size'</span>
                <span class="p">,</span> <span class="s1">'font-smoothing'</span>
                <span class="p">,</span> <span class="s1">'osx-font-smoothing'</span>
                <span class="p">,</span> <span class="s1">'font-style'</span>
                <span class="p">,</span> <span class="s1">'font-weight'</span>
                <span class="p">,</span> <span class="s1">'hyphens'</span>
                <span class="p">,</span> <span class="s1">'src'</span>
                <span class="p">,</span> <span class="s1">'line-height'</span>
                <span class="p">,</span> <span class="s1">'letter-spacing'</span>
                <span class="p">,</span> <span class="s1">'word-spacing'</span>
                <span class="p">,</span> <span class="s1">'color'</span>
                <span class="p">,</span> <span class="s1">'text-align'</span>
                <span class="p">,</span> <span class="s1">'text-decoration'</span>
                <span class="p">,</span> <span class="s1">'text-indent'</span>
                <span class="p">,</span> <span class="s1">'text-overflow'</span>
                <span class="p">,</span> <span class="s1">'text-rendering'</span>
                <span class="p">,</span> <span class="s1">'text-size-adjust'</span>
                <span class="p">,</span> <span class="s1">'text-shadow'</span>
                <span class="p">,</span> <span class="s1">'text-transform'</span>
                <span class="p">,</span> <span class="s1">'word-break'</span>
                <span class="p">,</span> <span class="s1">'word-wrap'</span>
                <span class="p">,</span> <span class="s1">'white-space'</span>
                <span class="p">,</span> <span class="s1">'vertical-align'</span>
                <span class="p">,</span> <span class="s1">'list-style'</span>
                <span class="p">,</span> <span class="s1">'list-style-type'</span>
                <span class="p">,</span> <span class="s1">'list-style-position'</span>
                <span class="p">,</span> <span class="s1">'list-style-image'</span>
                <span class="p">,</span> <span class="s1">'pointer-events'</span>
                <span class="p">,</span> <span class="s1">'cursor'</span>
                <span class="p">,</span> <span class="s1">'background'</span>
                <span class="p">,</span> <span class="s1">'background-attachment'</span>
                <span class="p">,</span> <span class="s1">'background-color'</span>
                <span class="p">,</span> <span class="s1">'background-image'</span>
                <span class="p">,</span> <span class="s1">'background-position'</span>
                <span class="p">,</span> <span class="s1">'background-repeat'</span>
                <span class="p">,</span> <span class="s1">'background-size'</span>
                <span class="p">,</span> <span class="s1">'border'</span>
                <span class="p">,</span> <span class="s1">'border-collapse'</span>
                <span class="p">,</span> <span class="s1">'border-top'</span>
                <span class="p">,</span> <span class="s1">'border-right'</span>
                <span class="p">,</span> <span class="s1">'border-bottom'</span>
                <span class="p">,</span> <span class="s1">'border-left'</span>
                <span class="p">,</span> <span class="s1">'border-color'</span>
                <span class="p">,</span> <span class="s1">'border-image'</span>
                <span class="p">,</span> <span class="s1">'border-top-color'</span>
                <span class="p">,</span> <span class="s1">'border-right-color'</span>
                <span class="p">,</span> <span class="s1">'border-bottom-color'</span>
                <span class="p">,</span> <span class="s1">'border-left-color'</span>
                <span class="p">,</span> <span class="s1">'border-spacing'</span>
                <span class="p">,</span> <span class="s1">'border-style'</span>
                <span class="p">,</span> <span class="s1">'border-top-style'</span>
                <span class="p">,</span> <span class="s1">'border-right-style'</span>
                <span class="p">,</span> <span class="s1">'border-bottom-style'</span>
                <span class="p">,</span> <span class="s1">'border-left-style'</span>
                <span class="p">,</span> <span class="s1">'border-width'</span>
                <span class="p">,</span> <span class="s1">'border-top-width'</span>
                <span class="p">,</span> <span class="s1">'border-right-width'</span>
                <span class="p">,</span> <span class="s1">'border-bottom-width'</span>
                <span class="p">,</span> <span class="s1">'border-left-width'</span>
                <span class="p">,</span> <span class="s1">'border-radius'</span>
                <span class="p">,</span> <span class="s1">'border-top-right-radius'</span>
                <span class="p">,</span> <span class="s1">'border-bottom-right-radius'</span>
                <span class="p">,</span> <span class="s1">'border-bottom-left-radius'</span>
                <span class="p">,</span> <span class="s1">'border-top-left-radius'</span>
                <span class="p">,</span> <span class="s1">'border-radius-topright'</span>
                <span class="p">,</span> <span class="s1">'border-radius-bottomright'</span>
                <span class="p">,</span> <span class="s1">'border-radius-bottomleft'</span>
                <span class="p">,</span> <span class="s1">'border-radius-topleft'</span>
                <span class="p">,</span> <span class="s1">'content'</span>
                <span class="p">,</span> <span class="s1">'quotes'</span>
                <span class="p">,</span> <span class="s1">'outline'</span>
                <span class="p">,</span> <span class="s1">'outline-offset'</span>
                <span class="p">,</span> <span class="s1">'opacity'</span>
                <span class="p">,</span> <span class="s1">'filter'</span>
                <span class="p">,</span> <span class="s1">'visibility'</span>
                <span class="p">,</span> <span class="s1">'size'</span>
                <span class="p">,</span> <span class="s1">'zoom'</span>
                <span class="p">,</span> <span class="s1">'transform'</span>
                <span class="p">,</span> <span class="s1">'box-align'</span>
                <span class="p">,</span> <span class="s1">'box-flex'</span>
                <span class="p">,</span> <span class="s1">'box-orient'</span>
                <span class="p">,</span> <span class="s1">'box-pack'</span>
                <span class="p">,</span> <span class="s1">'box-shadow'</span>
                <span class="p">,</span> <span class="s1">'box-sizing'</span>
                <span class="p">,</span> <span class="s1">'table-layout'</span>
                <span class="p">,</span> <span class="s1">'animation'</span>
                <span class="p">,</span> <span class="s1">'animation-delay'</span>
                <span class="p">,</span> <span class="s1">'animation-duration'</span>
                <span class="p">,</span> <span class="s1">'animation-iteration-count'</span>
                <span class="p">,</span> <span class="s1">'animation-name'</span>
                <span class="p">,</span> <span class="s1">'animation-play-state'</span>
                <span class="p">,</span> <span class="s1">'animation-timing-function'</span>
                <span class="p">,</span> <span class="s1">'animation-fill-mode'</span>
                <span class="p">,</span> <span class="s1">'transition'</span>
                <span class="p">,</span> <span class="s1">'transition-delay'</span>
                <span class="p">,</span> <span class="s1">'transition-duration'</span>
                <span class="p">,</span> <span class="s1">'transition-property'</span>
                <span class="p">,</span> <span class="s1">'transition-timing-function'</span>
                <span class="p">,</span> <span class="s1">'background-clip'</span>
                <span class="p">,</span> <span class="s1">'backface-visibility'</span>
                <span class="p">,</span> <span class="s1">'resize'</span>
                <span class="p">,</span> <span class="s1">'appearance'</span>
                <span class="p">,</span> <span class="s1">'user-select'</span>
                <span class="p">,</span> <span class="s1">'interpolation-mode'</span>
                <span class="p">,</span> <span class="s1">'direction'</span>
                <span class="p">,</span> <span class="s1">'marks'</span>
                <span class="p">,</span> <span class="s1">'page'</span>
                <span class="p">,</span> <span class="s1">'set-link-source'</span>
                <span class="p">,</span> <span class="s1">'unicode-bidi'</span>
                <span class="p">,</span> <span class="s1">'speak'</span>
<span class="p">]</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-import" class="section">
        <div class="col">
            <h3>不要使用 <code>@import</code></h3>
            <p>与 <code>&lt;link&gt;</code>标签相比, <code>@import</code> 更慢, 增加了额外的页面请求，可能还会导致不可预见的问题。避免使用它们，改用以下的方法:</p>
            <ul>
                <li>多用几个 <code>&lt;link&gt;</code> 标签</li>
                <li>将你的css编译到一个文件里</li>
                <li>用Rails, Jekyll,以及其他环境提供的特性来间接这些css</li>
            </ul>
            <p>更多信息, <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">阅读 Steve Souders 的文章</a>.</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="html"><span class="c">&lt;!-- Use link elements --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"core.css"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Avoid @imports --&gt;</span>
<span class="nt">&lt;style&gt;</span>
                <span class="k">@import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"more.css"</span><span class="o">)</span><span class="p">;</span>
<span class="nt">&lt;/style&gt;</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-media-queries" class="section">
        <div class="col">
            <h3>媒体查询位置</h3>
            <p>尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{</span>
                <span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span><span class="p">}</span>
                <span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
                <span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-prefixed-properties" class="section">
        <div class="col">
            <h3>前缀属性</h3>
            <p>当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。</p>
            <p>在 Textmate 中，使用 <strong>Text → Edit Each Line in Selection</strong> (⌃⌘A)。 在 Sublime Text 2 中， 使用 <strong>Selection → Add Previous Line</strong> (⌃⇧↑) 和 <strong>Selection →  Add Next Line</strong> (⌃⇧↓)。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Prefixed properties */</span>
<span class="nc">.selector</span> <span class="p">{</span>
                <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
                <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-single-declarations" class="section">
        <div class="col">
            <h3>单条声明的声明块</h3>
            <p>在一个声明块中<strong>只包含一条声明</strong>的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。</p>
            <p>这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Single declarations on one line */</span>
<span class="nc">.span1</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">60px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span2</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">140px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span3</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">220px</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* Multiple declarations, one per line */</span>
<span class="nc">.sprite</span> <span class="p">{</span>
                <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span>
                <span class="k">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
                <span class="k">height</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
                <span class="k">background-image</span><span class="o">:</span> <span class="sx">url(../img/sprite.png)</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.icon</span>           <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-home</span>      <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-20px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-account</span>   <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-40px</span><span class="p">;</span> <span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-shorthand" class="section">
        <div class="col">
            <h3>属性简写</h3>
            <p>坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:</p>
            <ul>
                <li><code>padding</code></li>
                <li><code>margin</code></li>
                <li><code>font</code></li>
                <li><code>background</code></li>
                <li><code>border</code></li>
                <li><code>border-radius</code></li>
            </ul>
            <p>大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。</p>
            <p>Mozilla Developer Network 有一篇对不熟悉属性简写及其行为的人来说很棒的关于 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand properties</a> 的文章。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nc">.element</span> <span class="p">{</span>
                <span class="k">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span>
                <span class="k">background</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
                <span class="k">background</span><span class="o">:</span> <span class="sx">url("image.jpg")</span><span class="p">;</span>
                <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span> <span class="m">3px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Good example */</span>
<span class="nc">.element</span> <span class="p">{</span>
                <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
                <span class="k">background-color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
                <span class="k">background-image</span><span class="o">:</span> <span class="sx">url("image.jpg")</span><span class="p">;</span>
                <span class="k">border-top</span><span class="o">-</span><span class="k">left</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
                <span class="k">border-top</span><span class="o">-</span><span class="k">right</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-nesting" class="section">
        <div class="col">
            <h3>LESS 和 SASS 中的嵌套</h3>
            <p>避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="scss"><span class="c1">// Without nesting</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="o">&gt;</span> <span class="nt">th</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="o">&gt;</span> <span class="nt">td</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
<span class="c1">// With nesting</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="p">{</span>
                <span class="o">&gt;</span> <span class="nt">th</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
                <span class="o">&gt;</span> <span class="nt">td</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-comments" class="section">
        <div class="col">
            <h3>代码注释</h3>
            <p>代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。</p>
            <p>Be sure to write in complete sentences or larger comments and succinct phrases for general notes.</p>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Bad example */</span>
<span class="c">/* Modal header */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
                <span class="o">...</span>
<span class="p">}</span>
<span class="c">/* Good example */</span>
<span class="c">/* Wrapping element for .modal-title and .modal-close */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
                <span class="o">...</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-classes" class="section">
        <div class="col">
            <h3>Class 命名</h3>
            <ul>
                <li>保持 Class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）。短划线应该作为相关类的自然间断。(例如，<code>.btn</code> 和 <code>.btn-danger</code>)。</li>
                <li>避免过度使用简写。<code>.btn</code> 可以很好地描述 <em>button</em>，但是 <code>.s</code> 不能代表任何元素。</li>
                <li>Class 的命名应该尽量短，也要尽量明确。</li>
                <li>使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。</li>
                <li>命名时使用最近的父节点或者父 class 作为前缀。</li>
                <li>使用 <code>.js-*</code> classes 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 classes。</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nc">.t</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.red</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.header</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="c">/* Good example */</span>
<span class="nc">.tweet</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.important</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet-header</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-selectors" class="section">
        <div class="col">
            <h3>选择器</h3>
            <ul>
                <li>使用 classes 而不是通用元素标签来优化渲染性能。</li>
                <li>避免在经常出现的组件中使用一些属性选择器 (例如，<code>[class^="..."]</code>)。浏览器性能会受到这些情况的影响。</li>
                <li>减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。</li>
                <li><strong>只</strong>在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况).</li>
            </ul>
            <p>扩展阅读:</p>
            <ul>
                <li><a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">Scope CSS classes with prefixes</a></li>
                <li><a href="http://markdotto.com/2012/03/02/stop-the-cascade/">Stop the cascade</a></li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nt">span</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.page-container</span> <span class="nf">#stream</span> <span class="nc">.stream-item</span> <span class="nc">.tweet</span> <span class="nc">.tweet-header</span> <span class="nc">.username</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="c">/* Good example */</span>
<span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet-header</span> <span class="nc">.username</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet</span> <span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-organization" class="section">
        <div class="col">
            <h3>代码组织</h3>
            <ul>
                <li>以组件为单位组织代码。</li>
                <li>制定一个一致的注释层级结构。</li>
                <li>使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。</li>
                <li>当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列，而组件移动就可以了。</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="css"><span class="c">/*</span>
<span class="c"> * Component section heading</span>
<span class="c"> */</span>
<span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="c">/*</span>
<span class="c"> * Component section heading</span>
<span class="c"> *</span>
<span class="c"> * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.</span>
<span class="c"> */</span>
<span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="c">/* Contextual sub-component or modifer */</span>
<span class="nc">.element-heading</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="css-editor-prefs" class="section">
        <div class="col">
            <h3>编辑器配置</h3>
            <p>根据以下的设置来配置你的编辑器，来避免常见的代码不一致和丑陋的 diffs。</p>
            <ul>
                <li>使用四个空格的 soft-tabs。</li>
                <li>在保存时删除尾部的空白字符。</li>
                <li>设置文件编码为 UTF-8。</li>
                <li>在文件结尾添加一个空白行。</li>
            </ul>
            <p>参照文档，将这些设置应用到项目的 <code>.editorconfig</code> 文件。 例如，<a href="https://github.com/twbs/bootstrap/blob/master/.editorconfig">Bootstrap 中的 <code>.editorconfig</code> 文件</a>。 通过 <a href="http://editorconfig.org">关于 EditorConfig</a> 了解更多内容。</p>
        </div>
    </div>
    <div id="JavaScript" class="heading">
        <h2>JavaScript</h2>
    </div>
    <div id="js-indentation" class="section">
        <div class="col">
            <h3>缩进,分号,单行长度</h3>
            <ul>
                <li>一律使用4个空格</li>
                <li>连续缩进 同样适用4个空格，跟上一行对齐</li>
                <li>Statement 之后一律以分号结束， 不可以省略</li>
                <li>单行长度，理论上不要超过80列，不过如果编辑器开启 soft wrap 的话可以不考虑单行长度</li>
                <li>接上一条，如果需要换行，存在操作符的情况，一定在操作符后换行，然后换的行缩进4个空格</li>
                <li>这里要注意，如果是多次换行的话就没有必要继续缩进了，比如说右边第二段这种就是最佳格式。</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">qqfind</span> <span class="o">===</span> <span class="s2">"undefined"</span> <span class="o">||</span>
                <span class="k">typeof</span> <span class="nx">qqfind</span><span class="p">.</span><span class="nx">cdnrejected</span> <span class="o">===</span> <span class="s2">"undefined"</span> <span class="o">||</span>
                <span class="nx">qqfind</span><span class="p">.</span><span class="nx">cdnrejected</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">url</span> <span class="o">=</span> <span class="s2">"http://pub.idqqimg.com/qqfind/js/location4.js"</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">url</span> <span class="o">=</span> <span class="s2">"http://find.qq.com/js/location4.js"</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-blank-lines" class="section">
        <div class="col">
            <h3>空行</h3>
            <ul>
                <li>方法之间加</li>
                <li>单行或多行注释前加</li>
                <li>逻辑块之间加空行增加可读性</li>
            </ul>
        </div>
    </div>
    <div id="js-variable-naming" class="section">
        <div class="col">
            <h3>变量命名</h3>
            <ul>
                <li>标准变量采用驼峰标识</li>
                <li>使用的ID的地方一定全大写</li>
                <li>使用的URL的地方一定全大写, 比如说 reportURL</li>
                <li>涉及Android的，一律大写第一个字母</li>
                <li>涉及iOS的，一律小写第一个，大写后两个字母</li>
                <li>常量采用大写字母，下划线连接的方式</li>
                <li>构造函数，大写第一个字母</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="kd">var</span> <span class="nx">thisIsMyName</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">goodID</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">AndroidVersion</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">iOSVersion</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">MAX_COUNT</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-literal-value-string" class="section">
        <div class="col">
            <h3>字符常量</h3>
            <ul>
                <li>一般情况下统一使用 '' 单引号</li>
            </ul>
        </div>
    </div>
    <div id="js-literal-value-null" class="section">
        <div class="col">
            <h3>null的使用场景</h3>
            <ul>
                <li>初始化一个将来可能被声明为一个对象的变量。</li>
                <li>与一个可能是对象或者非对象的初始化变量相比。</li>
                <li>传入一个对象待定的函数。</li>
                <li>作为一个对象待定的函数的返回值。</li>
            </ul>
            <h3>不适合null的使用场景</h3>
            <ul>
                <li>不要使用null来测试一个一个变量是否存在。</li>
                <li>不要用null来测试一个没声明的变量。</li>
            </ul>
        </div>
    </div>
    <div id="js-literal-value-undefined" class="section">
        <div class="col">
            <h3>undefined使用场景</h3>
            <ul>
                <li>永远不要直接使用undefined进行变量判断</li>
                <li>使用字符串 "undefined" 对变量进行判断</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// Bad</span>
<span class="kd">var</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">);</span>    <span class="c1">//true</span>
<span class="c1">// Good</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">person</span><span class="p">);</span>    <span class="c1">// "undefined"</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-literal-value-object" class="section">
        <div class="col">
            <h3>Object Literals</h3>
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// Bad</span>
<span class="kd">var</span> <span class="nx">team</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Team</span><span class="p">();</span>
<span class="nx">team</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="s2">"AlloyTeam"</span><span class="p">;</span>
<span class="nx">team</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// Good  semi colon 采用 Followed by space 的形式</span>
<span class="kd">var</span> <span class="nx">team</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">title</span><span class="o">:</span> <span class="s2">"AlloyTeam"</span><span class="p">,</span>
                <span class="nx">count</span><span class="o">:</span> <span class="mi">25</span>
<span class="p">};</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-literal-value-array" class="section">
        <div class="col">
            <h3>Array Literals</h3>
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// Bad</span>
<span class="kd">var</span> <span class="nx">colors</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="s2">"red"</span><span class="p">,</span> <span class="s2">"green"</span><span class="p">,</span> <span class="s2">"blue"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">);</span>
<span class="c1">// Good</span>
<span class="kd">var</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span> <span class="s2">"red"</span><span class="p">,</span> <span class="s2">"green"</span><span class="p">,</span> <span class="s2">"blue"</span> <span class="p">];</span>
<span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span> <span class="p">];</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-comments-single-line" class="section">
        <div class="col">
            <h3>单行注释</h3>
            <ul>
                <li>双斜线后，必须跟注释内容保留一个空格</li>
                <li>可独占一行, 前边不许有空行, 缩进与下一行代码保持一致</li>
                <li>可位于一个代码行的末尾，注意这里的格式</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// Good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// if you made it here, then all security checks passed</span>
                <span class="nx">allowed</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">zhangsan</span> <span class="o">=</span> <span class="s2">"zhangsan"</span><span class="p">;</span>    <span class="c1">// 双斜线距离分号四个空格，双斜线后始终保留一个空格</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-comments-multiline" class="section">
        <div class="col">
            <h3>多行注释格式</h3>
            <ul>
                <li>最少三行, 格式如右</li>
                <li>前边留空一行</li>
            </ul>
            <h3>何时使用</h3>
            <ul>
                <li>难于理解的代码段</li>
                <li>可能存在错误的代码段</li>
                <li>浏览器特殊的HACK代码</li>
                <li>想吐槽的产品逻辑, 合作同事</li>
                <li>业务逻辑强相关的代码</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="cm">/*</span>
<span class="cm"> * 注释内容与星标前保留一个空格</span>
<span class="cm"> */</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-comments-documentation" class="section">
        <div class="col">
            <h3>文档注释</h3>
            <ul>
                <li>各类标签 @param @method 等 参考 <a target="_blank" href="http://usejsdoc.org/">http://usejsdoc.org/</a></li>
                <li>格式如右</li>
            </ul>
            <h3>用在哪里</h3>
            <ul>
                <li>所有的方法</li>
                <li>所有的构造函数</li>
                <li>所有的全局变量</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="cm">/**</span>
<span class="cm"> * here boy, look here , here is girl</span>
<span class="cm"> * @method lookGril</span>
<span class="cm"> * @param {Object} balabalabala</span>
<span class="cm"> * @return {Object} balabalabala</span>
<span class="cm"> */</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-brace" class="section">
        <div class="col">
            <h3>括号对齐</h3>
            <ul>
                <li>标准示例 括号前后有空格， 花括号起始 不另换行，结尾新起一行</li>
                <li>花括号必须要， 即使内容只有一行， 决不允许右边第二种情况</li>
                <li>涉及 if for while do...while try...catch...finally 的地方都必须使用花括号</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="c1">// Good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">doSomething</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span>
                <span class="nx">doSomething</span><span class="p">();</span>
                <span class="nx">doSomethingElse</span><span class="p">();</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-if-else" class="section">
        <div class="col">
            <h3>if else else前后留有空格</h3>
            <div class="col">
                <div class="highlight">
                    <pre><code class="javascript"><span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">doSomething</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">doSomethingElse</span><span class="p">();</span>
<span class="p">}</span>
</code></pre>
                </div>
            </div>
        </div>
    </div>
    <div id="js-switch" class="section">
        <div class="col">
            <h3>switch</h3>
            <ul>
                <li>采用右边的格式， switch和括号之间有空格， case需要缩进， break之后跟下一个case中间留一个blank line</li>
                <li>花括号必须要， 即使内容只有一行， 决不允许右边第二种情switch 的 falling through 一定要有注释特别说明， no default 的情况也需要注释特别说明况</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="k">switch</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">case</span> <span class="s2">"first"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s2">"third"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">default</span><span class="o">:</span>
                <span class="c1">// code</span>
<span class="p">}</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// obvious fall through    // 这里为啥JSHint默认就会放过，因为 case "first" 内无内容</span>
                <span class="k">case</span> <span class="s2">"first"</span><span class="o">:</span>
                <span class="k">case</span> <span class="s2">"second"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s2">"third"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="cm">/* falls through */</span> <span class="c1">// 这里为啥要加这样的注释， 明确告知JSHint放过此处告警</span>
                <span class="k">default</span><span class="o">:</span>
                <span class="c1">// code</span>
<span class="p">}</span>
<span class="k">switch</span><span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">case</span> <span class="s2">"first"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s2">"second"</span><span class="o">:</span>
                <span class="c1">// code</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="c1">// no default</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-for" class="section">
        <div class="col">
            <h3>for</h3>
            <ul>
                <li>普通for循环, 分号后留有一个空格， 判断条件等内的操作符两边不留空格， 前置条件如果有多个，逗号后留一个空格</li>
                <li>for-in 一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="kd">var</span> <span class="nx">values</span> <span class="o">=</span> <span class="p">[</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span> <span class="p">],</span>
                <span class="nx">i</span><span class="p">,</span> <span class="nx">len</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">len</span><span class="o">=</span><span class="nx">values</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">process</span><span class="p">(</span><span class="nx">values</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">prop</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">prop</span> <span class="k">in</span> <span class="nx">object</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// 注意这里一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn ！</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">object</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">prop</span><span class="p">))</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Property name is "</span> <span class="o">+</span> <span class="nx">prop</span><span class="p">);</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Property value is "</span> <span class="o">+</span> <span class="nx">object</span><span class="p">[</span><span class="nx">prop</span><span class="p">]);</span>
                <span class="p">}</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-variable-declaration" class="section">
        <div class="col">
            <h3>变量声明</h3>
            <ul>
                <li>所有函数内变量声明放在函数内头部，只使用一个 var(多了JSLint报错)， 一个变量一行， 在行末跟注释， 注释啊，注释啊，亲</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="kd">function</span> <span class="nx">doSomethingWithItems</span><span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="mi">10</span><span class="p">,</span>    <span class="c1">// 注释啊，注释啊，亲</span>
                <span class="nx">result</span> <span class="o">=</span> <span class="nx">value</span> <span class="o">+</span> <span class="mi">10</span><span class="p">,</span>    <span class="c1">// 注释啊，注释啊</span>
                <span class="nx">i</span><span class="p">,</span>    <span class="c1">// 注释啊，注释啊，亲</span>
                <span class="nx">len</span><span class="p">;</span>    <span class="c1">// 注释啊，注释啊，亲</span>
                <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">len</span><span class="o">=</span><span class="nx">items</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">doSomething</span><span class="p">(</span><span class="nx">items</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
                <span class="p">}</span>
<span class="p">}</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-function-declaration" class="section">
        <div class="col">
            <h3>函数声明</h3>
            <ul>
                <li>一定先声明再使用， 不要利用 JavaScript engine的hoist特性, 违反了这个规则 JSLint 和 JSHint都会报 warn</li>
                <li>function declaration 和 function expression 的不同，function expression 的（）前后必须有空格，而function declaration 在有函数名的时候不需要空格， 没有函数名的时候需要空格。</li>
                <li>函数调用括号前后不需要空格</li>
                <li>立即执行函数的写法, 最外层必须包一层括号</li>
                <li>"use strict" 决不允许全局使用， 必须放在函数的第一行， 可以用自执行函数包含大的代码段, 如果 "use strict" 在函数外使用， JSLint 和 JSHint 均会报错</li>
            </ul>
        </div>
        <div class="col">
            <div class="highlight">
                <pre><code class="javascript"><span class="kd">function</span> <span class="nx">doSomething</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// do something</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// do something</span>
<span class="p">}</span>
<span class="c1">// Good</span>
<span class="nx">doSomething</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>
<span class="c1">// Bad: Looks like a block statement</span>
<span class="nx">doSomething</span> <span class="p">(</span><span class="nx">item</span><span class="p">);</span>
<span class="c1">// Good</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                <span class="c1">// function body</span>
                <span class="k">return</span> <span class="p">{</span>
                <span class="nx">message</span><span class="o">:</span> <span class="s2">"Hi"</span>
                <span class="p">}</span>
<span class="p">}());</span>
<span class="c1">// Good</span>
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                <span class="s2">"use strict"</span><span class="p">;</span>
                <span class="kd">function</span> <span class="nx">doSomething</span><span class="p">()</span> <span class="p">{</span>
                <span class="c1">// code</span>
                <span class="p">}</span>
                <span class="kd">function</span> <span class="nx">doSomethingElse</span><span class="p">()</span> <span class="p">{</span>
                <span class="c1">// code</span>
                <span class="p">}</span>
<span class="p">})();</span>
</code></pre>
            </div>
        </div>
    </div>
    <div id="js-miscellaneous" class="section">
        <div class="col">
            <h3>杂项</h3>
            <ul>
                <li>完全避免 == != 的使用， 用严格比较条件 ===  !==</li>
                <li>eval 非特殊业务， 禁用！！！</li>
                <li>with 非特殊业务， 禁用！！！</li>
            </ul>
        </div>
    </div>
    <footer class="footer">
        
    </footer>
</body>
</html>